<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // async 和 await
    // async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise
    // async 函数返回的是一个 Promise 对象
    // 用async声明的异步函数  他的返还值自动包装为Promise对象
    // await 是在等待一个 async 函数完成 await 等待的是一个表达式
    // 依次执行异步代码
    function fn1 () {
      return new Promise(res => {
        setTimeout(() => {
          console.log(1);
          res(111)
        }, 1000);
      })
    }
    function fn2 () {
      return new Promise((res, rej) => {
        setTimeout(() => {
          console.log(2)
          res(222)
          // rej("第二个错误")
        }, 1000);
      })
    }
    function fn3 () {
      return new Promise(res => {
        setTimeout(() => {
          console.log(3);
          res(333)
        }, 1000);
      })
    }

    // fn1();
    // fn2();
    // fn3();

    // ES6里的 promise 的链式操作
    // fn1().then(res=>{
    //     console.log(res);
    //     return fn2()
    // }).then(res=>{
    //     console.log(res);
    //     return fn3();
    // }).then(res=>{
    //     console.log(res);
    // }).catch(err=>{console.log(err)})

    // ES8 通过 async 和await 把 调用简写 
    // 提供了一种语法糖 ：利用同步语法 书写异步 
    // tyr 和 catch 分别用来捕捉成功和失败的回调
    async function myfn () {
      try {
        let res1 = await fn1();  // await 会等待 promise里的reslove 或者reject执行之后再执行下面代码 ，await 会等待一个promise对象
        console.log(res1);
        let res2 = await fn2();
        console.log(res2);
        let res3 = await fn3();
        console.log(res3);
      } catch (err) {
        console.log("error:", err);
      }

    }

    // myfn();

    // 1.await 后面是一个promise对象   ，await 一定要在async函数里 ，不能单独存在
    //  async function fn(){
    //     // await Promise.resolve(111);
    // }
    // fn();



    // 2.async 和await 不能出现嵌套关系

    // let arr = [fn1, fn2, fn3];

    // async function myfn (arr) {
    //   // arr.forEach(async f=>{
    //   //     await f();
    //   // })
    //   // for(let i=0;i<arr.length;i++){
    //   //     await arr[i]();
    //   // }

    //   for (let val of arr) {
    //     await val();
    //   }
    // }
    // myfn(arr);

    // async function f1 () {
    //   await fn1()
    // }
    // async function f2 () {
    //   await fn2()
    // }
    // async function f3 () {
    //   await fn3()
    // }


  </script>
</body>

</html>